<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>合同-账单</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/index_team.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
	html,body{
		height:auto;
	} 
	.layui-table-view .layui-table td,.layui-table-view .layui-table th {padding:10px 0px;}   
	.layui-table-cell{height: 100%;line-height: 20px;}
</style>
<body>
		<div class="layui-tab-content " id="teamList">
			<table class="layui-hide" id="LAY_table_bill" lay-filter="bill"></table> 
			
			</div>
	<input type="hidden" id="contractId" name="contractId" th:value="${contractId}" />
	<input type="hidden" id="type" name="type" th:value="${type}" />
</body>
<script>
var contractId = $("#contractId").val();
var type = $("#type").val();
var table;
$(function(){
	
	layui.use(['element','table','layer'], function(){
	  var element = layui.element;
	  table = layui.table;
	  element.on('tab(docNavTabBrief)', function(){
		  var target=$(this),index=$(this).index();
		  
	  });
	//方法级渲染
		table.render({
			id:'bill',
		    elem: '#LAY_table_bill',
		    url: '/app/contractReceivable/listdata',
		    where:{
		    	params:{
		    		contractId:contractId,
		    		bill:1,
		    		flag:1
		    	}
		    },
		    cols: [[
		      {field: 'status', title: '收款状态',templet:function(d){
		    	  var time = new Date().getTime()-new Date(d.receivableDate).getTime();
		    	  var days = parseInt(time/(1000 * 60 * 60 * 24));
		    	   if(d.state == 0){
		    		   if(days > 0){
		    			   return '<span style="display:inline-block;background:#e6e6e6;color:#666;padding: 5px 10px;text-align:center;">已逾期</span>'; 
		    		   }else{
		    			   return '<span style="display:inline-block;background:#f2a73d;color:#fff;padding: 5px 10px;text-align:center;">待支付</span>'; 
		    		   }
		    		  
		    	  }else{
		    		  return '<span style="display:inline-block;background:#0AC862;color:#fff;padding: 5px 10px;text-align:center;">确认核销</span>';
		    	  } 
		      }}
		      ,{field: 'fkDicReceivableType', title: '账单类型',templet:function(d){
		    	  if(d.fkDicReceivableType == 0){
		    		  return '租金';
		    	  }else if(d.fkDicReceivableType == 1){
		    		  return '押金';
		    	  }else{
		    		  return '退款';
		    	  }
		      }}
		      , {field: 'receivableNumber', title: '公司名称',width:200,templet:function(d){
		    	  var time = new Date().getTime()-new Date(d.receivableDate).getTime();
		    	  var days = parseInt(time/(1000 * 60 * 60 * 24));
		    	  if(days > 0 && d.state ==0){
		    		  return '<div style="color:#333">'+d.team.fullName+'<span style="color:#dd5a55"> (已逾期'+days+'天)</span><br><span>账单：'+d.receivableNumber+'</span></div>'; 
			    	  
		    	  }else{
		    		  return '<div style="color:#333">'+d.team.fullName+'</div>账单：'+d.receivableNumber; 
		    	  }
		    	  
		      }}
		      , {field: 'receivableAmount', title: '应收金额'}
		      , {field: 'receivableDate', title: '到期日期'}
		      , {field: 'paymentDate', title: '实际付款日',templet:function(d){
		    	  if(d.paymentDate){
		    		  return d.paymentDate;
		    	  }else{
		    		  return '无';
		    	  }
		      }}
		      ,{field: 'opt', title: '操作',templet:function(d){
		    	  if(d.state == 0){
		    		  return '<a href="javascript:;" class="layui-btn  layui-btn-xs layui-btn-normal" onclick=updateBillStatus("'+d.id+'")>收款</a>' 
		    	  }else{
		    		  return '已收款';
		    	  }
		    	  
		      }}
		    ]]
		    ,page: true
			,done:function(){
				setHeight()
	        }
		});
		tableBtnOpt();
	});
	
	
})
function tiaozhuan(id){
	var iframeSrc='/app/contractInfo/detailCenter/'+id;
	var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
    iframe.src = iframeSrc;
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.id = 'project-iframe';
    parent.parent.$(".iframe-wrap").html($(iframe));
}
function tableBtnOpt(){
	var $mylist = $("#LAY_table_contract").next('.layui-table-view').find('.layui-table-body table.layui-table');
	/*  点击tr元素,跳转详情基于table*/
	  $mylist.on("click",'tr',function(){
			var targetI=$(this);
			var id=$(targetI).children('td').find("span[data-id]").attr("data-id");
			tiaozhuan(id);
			return false;
	  }); 
}

/* 阻止事件冒泡 */
function preventBubble(event){ //取消事件冒泡
	  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
	  if (e && e.stopPropagation) {  
	    e.stopPropagation();  
	  } else if (event) {  
	    event.cancelBubble = true;  
	  }  
}
/* 根据iframe的内容撑开iframe的容器 */

function setHeight() {
	var h = document.body.clientHeight*1;
	window.parent.setiframeWrap(h);
}
function updateBillStatus(id){
	top.layer.confirm('是否确定收款？', function(index){
    	//发送删除请求
    	$.post("/app/contractReceivable/shoukuan",{id:id},function(res){
    		top.layer.msg(res.msg);
    		top.layer.close(index);
    		table.reload('bill',{
    			  page: {
    			    curr: 1 //重新从第 1 页开始
    			  }
    			});
    		setHeight();//更新容器高度
        },"json");
  	});
}
</script>
</html>